<template>
  <div class="layout">
    <Layout>
      <Sider breakpoint="md" collapsible :collapsed-width="78" v-model="isCollapsed" width="140px">
        <Menu :active-name="active" theme="dark" width="auto" :class="menuitemClasses" @on-select="SelectFun">
          <MenuItem name="1-1">
          <Icon type="ios-home"></Icon>
          <span>精选导航</span>
          </MenuItem>
          <MenuItem name="1-2">
          <Icon type="ios-film"></Icon>
          <span>Ai画图社区</span>
          </MenuItem>
          <MenuItem name="1-3">
          <Icon type="md-at" />
          <span>免费Ai对话</span>
          </MenuItem>
          <MenuItem name="1-4">
          <Icon type="ios-brush" />
          <span>免费Ai画图</span>
          </MenuItem>
          <MenuItem name="1-5">
          <Icon type="md-hammer" />
          <span>自用工具</span>
          </MenuItem>
        </Menu>
      </Sider>
        <Content :style="{ margin: '20px', background: '#fff', minHeight: '220px' }">
          <List v-if="active === '1-1'"/>
          <Other v-if="active === '1-2'"/>
          <AiSay v-if="active === '1-3'"/>
          <AiImage v-if="active === '1-4'"/>
          <Books v-if="active === '1-5'"/>
        </Content>
        <!-- <ThreeComponent></ThreeComponent>    -->
    </Layout>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue' // 从 Vue 中导入 ref 和 vueVersion
import { version, Message } from 'view-ui-plus' // 从 view-ui-plus 中导入 version 和 Message
import List from './components/List.vue'
import Books from './components/Books.vue'
import Other from './components/Other.vue'
import AiImage from './components/AiImage.vue'
import AiSay from './components/AiSay.vue'
// import ThreeComponent from './components/Three.vue'
const isCollapsed = ref(false)
const active = ref('1-1')
const menuitemClasses = computed(() => {
  return [
    'menu-item',
    isCollapsed.value ? 'collapsed-menu' : ''
  ]
})
const SelectFun = (name) => {
  active.value =  name 
}
</script>

<style scoped>
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  height: 100%;
  width: 100%;
  position: absolute;
  inset: auto;
}

.layout-header-bar {
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
.ivu-layout.ivu-layout-has-sider {
  height: 100%;
}
.menu-item span {
  display: inline-block;
  overflow: hidden;
  width: 69px;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  transition: width .2s ease .2s;
}

.menu-item i {
  transform: translateX(0px);
  transition: font-size .2s ease, transform .2s ease;
  vertical-align: middle;
  font-size: 16px;
}

.collapsed-menu span {
  width: 0px;
  transition: width .2s ease;
}

.collapsed-menu i {
  transform: translateX(5px);
  transition: font-size .2s ease .2s, transform .2s ease .2s;
  vertical-align: middle;
  font-size: 22px;
}

.dev-run-preview .dev-run-preview-edit {
  display: none
}
</style>
<style>
/* 滚动条样式自定义 */
.scroll::-webkit-scrollbar {
  width: 6px;
  height: 1px;
}
.scroll::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background-color: #dcdcdc;
}
.scroll::-webkit-scrollbar-track {
  background: #ffffff;
}
</style>